<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style type="text/css">
    .chk3 {
        display: none;
    }
    
    .chk3 + label {
        position: relative;
        background-color: #fafbfa;
        padding: 9px;
        border-radius: 50px;
        display: inline-block;
        margin-right: 30px;
        --webkit-transform: all 0.1s ease-in;
        transition: all 0.1s ease-in;
        width: 50px;
        height: 15px;
    }
    
    .chk3 + label:after {
        content: "";
        position: absolute;
        top: 0;
        --webkit-transform: box-shadow 0.1s ease-in;
        transition: box-shadow 0.1s ease-in;
        left: 0;
        width: 100%;
        height: 100%;
        box-shadow: 0 0 0 0 #eee, 0 0 1px rgba(0, 0, 0, 0.4);
        border-radius: 100px;
    }
    
    .chk3 + label:before {
        content: "";
        position: absolute;
        background-color: #fff;
        top: 1px;
        left: 1px;
        z-index: 999999;
        width: 31px;
        --webkit-transform: all 0.1s ease-in;
        transition: all 0.1s ease-in;
        height: 31px;
        box-shadow: 0 3px 1px rgba(0, 0, 0, 0.05), 0 0px 1px rgba(0, 0, 0, 0.3);
        border-radius: 100px;
    }
    
    .chk3:active + label:before {
        box-shadow: inset 0 0 0 20px #eee, 0 0 1px #eee;
        width: 37px;
    }
    
    .chk3:checked:active + label:before {
        width: 37px;
        left: 20px;
    }
    
    .chk3:checked + label:before {
		content: "";
		position: absolute;
		left: 35px;
		border-radius: 100px;
    }
    
    .chk3:checked + label:after {
        content: "";
        font-size: 1.5em;
        position: absolute;
		background: #4cda60;
		box-shadow: 0 0 1px #4cda60;
    }
    </style>
</head>

<body>
    <input type="checkbox" id="checkbox3" class="chk3" name="">
    <label for="checkbox3"></label>
</body>

</html>
